<template>
	<uni-popup class="pop" ref="popupRef" type="bottom" :animation="true">
		<view class="pop-content" :style="{ marginBottom: '-' + safeBottom + 'px'}">
			<view class="header">
				<view>
				</view>
				<text>选择出行人数</text>
				<image @click="closePop"
					src="https://img.js.design/assets/img/66eabe069abe61d89118f24e.png#ccfd6fdbad4e05399710f7a1a0b16e9b"
					mode=""></image>
			</view>
			<view class="container-content">
				<view class="people-choosen-box">
					<text>人数</text>
					<cwrStepperVue :min="1" :max="Currentcount" :modelValue="initialCount" @update:modelValue="updateCount">
					</cwrStepperVue>
				</view>
				<view class="tips">
					<text>如果团体人数过大，请联系客服下单</text>
					<button class="button-box" open-type="contact">
						<view class="button" @click="">
							联系客服 >
						</view>
					</button>
				</view>
				<view class="kongbai">
					
				</view>
				<view class="footer-box">
					<view class="footer" @click="result">
						完成
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		safeBottom
	} from '@/config/systemInfo.js'
	import cwrStepperVue from '../../../components/cwrStepper.vue';
	// 接收父组件传入的最小值、最大值和初始值
	const props = defineProps({
	
		Currentcount: {
			type: Number,
			default: 8
		},
	
	});
	const data = ref([1, 2, 3, 4, 5, 6])
	const popupRef = ref(null);
	// 步进器初始值
	const initialCount = ref(1); // 使用 ref 确保响应性

	// 更新子组件的值
	const updateCount = (newValue) => {
		initialCount.value = newValue;
	};
	// 子组件方法
	const emits = defineEmits(['result'])
	const result = ()=>{
		emits('result',initialCount.value)
	}
	const closePop = () => {
		popupRef.value.close();
	}
	// 暴露方法给父组件
	const exposeMethods = {
		showPopup: () => {
			popupRef.value.open();
		},
		closePopup: () => {
			popupRef.value.close();
		}
	};
	defineExpose({
		...exposeMethods
	});
</script>

<style scoped>
	.pop-content {
		font-family: "仓耳渔阳体 W05";
		/* 添加样式 */
		background: #f5f6f7;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		/* padding: 86rpx 296rpx 80rpx 296rpx; */
		box-sizing: border-box;
	}

	.header {
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		height: 43rpx;
		background: rgba(255, 255, 255, 1);
		padding: 24rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header image {
		width: 44rpx;
		height: 44rpx;
	}

	.header text {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.header>view {
		width: 44rpx;
	}

	.container-content {
		width: 100%;
		background-color: #f5f6f7;
		padding: 0 4rpx;
		/* margin: 0 auto; */

	}

	.people-choosen-box {
		width: 94%;
		margin: 0 auto;
		padding: 22rpx 26rpx 30rpx 26rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.footer {
		width: 94%;
		margin: 0 auto;
		background-color: #000;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
		padding: 18rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.footer-box {
		padding: 22rpx 26rpx 30rpx 26rpx;
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
	}
	.tips{
		padding: 22rpx 26rpx 30rpx 26rpx;
		box-sizing: border-box;
		width: 94%;
		margin: 0 auto;
		display: flex;
		gap: 20rpx;
		align-items: center;
		justify-content: space-between;
	}
	.tips text{
		color: #9e9e9e;
		font-size: 26rpx;
	}
	/* //TODO 按钮无边框 */
	.tips button{
		margin: 0 !important;
		padding: 0 !important;
		background-color: #f5f6f7;
	}
	.tips button::after{
		border: none;
	}
	.button{
		font-size: 26rpx;
	}
	.kongbai{
		height: 10vh;
	}
</style> 